<template>
  <div class="about">
     <!--搜索-->
        <el-row>
            <el-col :span="6"><el-input v-model="name" size="mini" placeholder="请输入汽车品牌"></el-input></el-col>
            <el-col :span="6"><el-input v-model="firstLetter" size="mini" placeholder="请输汽车首字母"></el-input></el-col>
            <el-col :span="6"><el-button type="primary" @click="search"  size="mini" icon="el-icon-search">搜索</el-button>
            &nbsp;<el-button type="primary"  size="mini" icon="el-icon-circle-plus" @click="handleAdd">添加</el-button></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">&nbsp;</div></el-col>
        </el-row>
        <!--分页列表显示-->
        <el-row>
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    height="450px">
                <!-- 详细信息 -->
                <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="品牌编号">
                        <span>{{ props.row.id}}</span>
                    </el-form-item>
                    <el-form-item label="品牌名称">
                        <span>{{ props.row.name }}</span>
                    </el-form-item>
                    <el-form-item label="首字母">
                        <span>{{ props.row.firstLetter }}</span>
                    </el-form-item>
                    <el-form-item label="添加时间">
                        <span>{{ props.row.addtime }}</span>
                    </el-form-item>
                    </el-form>
                </template>
                </el-table-column>
                <!-- 分页显示 -->    
                <el-table-column
                        prop="id"
                        label="汽车品牌编号"
                        sortable>
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="品牌名称">
                </el-table-column>
                <el-table-column
                        prop="firstLetter"
                        label="首字母">
                </el-table-column>
                <el-table-column
                        prop="sort"
                        label="排序">
                </el-table-column>
                <!-- 是否为品牌制造商：0->不是；1->是 -->
                <el-table-column
                        prop="factoryStatus"
                        label="是否为品牌制造商">
                        <template slot-scope="scope">
                            <el-switch
                            v-model="scope.row.factoryStatus"
                            @change='changFactoryStatus($event,scope.row.factoryStatus,scope.row.id)'
                            active-color="#13ce66"
                            inactive-color="#DCDFE6"
                            :active-value="1"
                            :inactive-value="0">
                            </el-switch>
                        </template>
                </el-table-column>
                <!-- 0(绿色)可用1(红色)不可用 -->
                <el-table-column
                        prop="showStatus"
                        label="状态">
                        <template slot-scope="scope">
                        <el-switch
                            v-model="scope.row.showStatus"
                            @change='changeStatus($event,scope.row.showStatus,scope.row.id)'
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            :active-value="0"
                            :inactive-value="1">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="logo"
                        label="品牌logo">
                        <template slot-scope="scope" class="demo-image__preview">
                        <el-image
                        style="width: 50px; height: 50px"
                        :src="scope.row.logo"
                        :preview-src-list="srcList1[scope.row.logo]"></el-image>
                        </template>
                </el-table-column>
                <el-table-column
                        prop="bigPic"
                        label="专区大图">
                        <template slot-scope="scope">
                        <div class="demo-image__preview">
                            <el-image 
                                style="width: 80px; height: 60px"
                                :src="scope.row.bigPic" 
                                :preview-src-list="srcList"
                                @click="loadImgList(scope.$index, scope.row)">
                            </el-image>
                        </div>
                        </template>
                </el-table-column>
                <el-table-column
                        prop="brandStory"
                        label="品牌故事">
                </el-table-column>
                <el-table-column
                        prop="addtime"
                        label="添加时间">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <!--分页插件-->
        <el-row>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[2,3,5,10,100, 200, 300, 400]"
                    :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-row>
        <!--添加和更新 弹框-->
        <el-row>
            <el-dialog :title="title" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="品牌名称" >
                        <el-input v-model="form.name" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="首字母" >
                        <el-input v-model="form.firstLetter" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input v-model="form.sort" auto-complete="off"></el-input>
                        <div class="block">
                            <el-rate
                                v-model="form.sort"
                                :colors="colors">
                            </el-rate>
                        </div>
                    </el-form-item>
                    <el-form-item label="是否为品牌制造商:" >
                            <!-- <el-input v-model="form.factoryStatus" auto-complete="off"></el-input> -->
                            <el-radio-group v-model="form.factoryStatus" size="medium">
                            <el-radio border :label="1">是</el-radio>
                            <el-radio border :label="0">不是</el-radio>
                            </el-radio-group>
                    </el-form-item>
                    <el-form-item label="展示状态" >
                        <el-input v-model="form.showStatus" auto-complete="off"></el-input>
                            <el-switch
                                v-model="form.showStatus" auto-complete="off"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                :active-value="0"
                                :inactive-value="1">
                            </el-switch>     
                    </el-form-item>
                    <el-form-item label="品牌logo" >
                        <!-- <el-input v-model="form.logo" auto-complete="off"></el-input> -->
                        <el-upload
                            class="avatar-uploader"
                            action="http://localhost:11930/api/cs/commonOSS/upload"
                            name="file"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" width="150px" height="150px"> 
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    </el-form-item>
                    <el-form-item label="专区大图" >
                        <!-- <el-input v-model="form.bigPic" auto-complete="off"></el-input> -->
                        <el-upload
                            class="avatar-uploader"
                            action="http://localhost:11930/api/cs/commonOSS/upload"
                            name="file"
                            :on-success="handleAvatarSuccessBig"
                            :before-upload="beforeAvatarUploadBig">
                        <img v-if="imageUrlBig" :src="imageUrlBig" class="avatar" width="350px" height="200px">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    </el-form-item>
                    <el-form-item label="品牌故事" >
                        <el-input v-model="form.brandStory" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addOrUpdate">确 定</el-button>
                </div>
            </el-dialog>
        </el-row>
  </div>
</template>
<script>
export default {
      data() {
        return {
               tableData:[],
                currentPage:1,//当前页面，默认1
                pageSize:5,//每页显示条数
                total:100,//分页总数量，默认值随便写，初始化时赋予新值
                name:'',//查询功能
                firstLetter:'',
                dialogFormVisible:false,
                title:'车辆品牌添加',
                url: '',
                srcList: [],
                srcList1: [],
                imageUrl:'',
                imageUrlBig:'',
                // showStatus:'',
                // factoryStatus:'',
                colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
                form:{}
        }
      },
       created:function(){
               //初始化
                this.loadData();
            },
            methods:{
                //加载图片集合
                loadImgList(index,row){
                    this.srcList=[];
                    // alert("111");
                    console.log(row.id);
                    var _this = this;
                            //定义json对象
                            var jsons = {
                                brandid:row.id
                            }
                            this.$http({
                                url:'/api/cars/brandBigpic/queryAll',
                                method:'post',
                                data:jsons,
                                header:{
                                'Content-Type':'application/json'  //如果写成contentType会报错
                                }
                            }).then(function (response) {
                                    console.log("=========");
                                    console.log(response);
                                    if(response.data.code==2000){
                                        console.log("图片集合加载成功");
                                        _this.srcList=response.data.data;
                                    }else{
                                        console.log("图片集合加载失败");
                                    }
                                })
                                .catch(function (error) {
                                    //失败处理
                                    console.log(error);
                                    console.log("==========");
                                });
                },
                //用户账号状态开关改变
                        changFactoryStatus($event,num,bid){
                            console.log(bid);
                            console.log($event);
                            console.log(num);
                            var _this = this;
                            //定义json对象
                            var jsons = {
                                id:bid,
                                factoryStatus:num
                            }
                            this.$http({
                                url:'/api/cars/brand/update',
                                method:'post',
                                data:jsons,
                                header:{
                                'Content-Type':'application/json'  //如果写成contentType会报错
                                }
                            }).then(function (response) {
                                    console.log("=========");
                                    console.log(response);
                                    if(response.data.code==2000){
                                        console.log("品牌制造商状态改变成功");
                                    }else{
                                        console.log("品牌制造商状态改变失败");
                                    }
                                })
                                .catch(function (error) {
                                    //失败处理
                                    console.log(error);
                                    console.log("==========");
                                });
                        },
                    //用户账号状态开关改变
                        changeStatus($event,num,bid){
                            console.log(bid);
                            console.log($event);
                            console.log(num);
                            var _this = this;
                            //定义json对象
                            var jsons = {
                                id:bid,
                                showStatus:num
                            }
                            this.$http({
                                url:'/api/cars/brand/update',
                                method:'post',
                                data:jsons,
                                header:{
                                'Content-Type':'application/json'  //如果写成contentType会报错
                                }
                            }).then(function (response) {
                                    console.log("=========");
                                    console.log(response);
                                    if(response.data.code==2000){
                                        console.log("品牌状态改变成功");
                                    }else{
                                        console.log("品牌状态改变失败");
                                    }
                                })
                                .catch(function (error) {
                                    //失败处理
                                    console.log(error);
                                    console.log("==========");
                                });
                        },
                //加载数据
                loadData(){
                   //获取数据
                          this.$http.post("/api/cars/brand/queryAll?pageNo="+this.currentPage+"&pageSize="+this.pageSize,{
                                            name:this.name,
                                            firstLetter:this.firstLetter
                                      }).then((response) => {
                                                 console.log(response);
                                              if(response.data.code==2000){
                                                  this.tableData = response.data.data.list;
                                                  this.total = response.data.data.total;
                                                //   this.url = response.data.data.list.logo;
                            
                                                //   this.srcList = response.data.data.list[0].logo;

                                              }
                                })  
                        
                },
                //图片上传成功之后的处理
              handleAvatarSuccess(res,file){
                  this.imageUrl=URL.createObjectURL(file.raw);
                  console.log("返回值-》名称："+file.response.oldFileName
                  +"新路径："+file.response.filePath);
                  console.log(file.response);
                  this.form.logo=file.response.ossFileUrlBoot;
              },
              //图片上传之前的处理
              beforeAvatarUpload(file) {
                  // const isJPG = file.type === 'image/jpeg';
                  //file.size 上传图片的大小，单位为字节
                  const isLt5M = file.size / 1024 / 1024 < 5;

                  // if (!isJPG) {
                  //     this.$message.error('上传头像图片只能是 JPG 格式!');
                  // }
                  if (!isLt5M) {
                      this.$message.error('上传头像图片大小不能超过 5MB!');
                  }
                  return isLt5M;
              },
               //图片上传成功之后的处理
              handleAvatarSuccessBig(res,file){
                  this.imageUrlBig=URL.createObjectURL(file.raw);
                  console.log("返回值-》名称："+file.response.oldFileName
                  +"新路径："+file.response.filePath);
                  console.log(file.response);
                  this.form.bigPic=file.response.ossFileUrlBoot;
              },
              //图片上传之前的处理
              beforeAvatarUploadBig(file) {
                  // const isJPG = file.type === 'image/jpeg';
                  //file.size 上传图片的大小，单位为字节
                  const isLt5M = file.size / 1024 / 1024 < 5;

                  // if (!isJPG) {
                  //     this.$message.error('上传头像图片只能是 JPG 格式!');
                  // }
                  if (!isLt5M) {
                      this.$message.error('上传头像图片大小不能超过 5MB!');
                  }
                  return isLt5M;
              },
                //各种绑定事件方法
                //每页数量发生变化
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                    this.pageSize=val;
                    this.loadData();
                   /* axios.get('/dept/page',{
                        params: {
                            pageNo: this.currentPage,
                            pageSize: this.pageSize
                        }
                    })
                        .then(function (response) {
                            //正确请求时，回调函数
                            console.log(response);
                            if(response.data.code==2000){
                                _this.tableData = response.data.data.pageDept;
                                _this.total = response.data.data.total;
                            }
                        })
                        .catch(function (error) {
                            //失败处理
                            console.log(error);
                        });*/
                },
                //当前页发生变化
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                    this.currentPage=val;
                    this.loadData();
                    /*axios.get('/dept/page',{
                        params: {
                            pageNo: this.currentPage,
                            pageSize:this.pageSize
                        }
                    })
                        .then(function (response) {
                            //正确请求时，回调函数
                            console.log(response);
                            if(response.data.code==2000){
                                _this.tableData = response.data.data.pageDept;
                                _this.total = response.data.data.total;
                            }
                        })
                        .catch(function (error) {
                            //失败处理
                            console.log(error);
                        });*/
                },
                //查询方法
                search(){
                   this.loadData();
                },
                //处理添加
                handleAdd(){
                    //清空原来form
                    this.form={};
                    //更新显示名称
                    this.title="汽车品牌添加";
                    //对话框显示
                    this.dialogFormVisible=true;
                },
                //处理编辑（弹出汽车更新对话框）
                handleEdit(index, row) {
                    console.log(index, row);
                    //{deptNo:10,dname:'ACCOUNTING',loc:'纽约'}
                    this.form=row;
                    //更新显示名称
                    this.title="汽车品牌更新";
                    //对话框显示
                    this.dialogFormVisible=true;
                    this.imageUrl = row.logo;
                    this.imageUrlBig = row.bigPic;
                },

                //提交表单数据（添加或者更新）
                addOrUpdate(){
                    var  url ='/api/cars/brand/update';
                    if(this.form.id==''||this.form.id==null){
                        url="/api/cars/brand/insert"
                    }
                   var _this=this;
                    //提交方法
                    this.$http.post(url, this.form)
                        .then(function (response) {
                            console.log(response);
                            //提交成功
                            if(response.data.code==2000){
                                //关闭弹出框
                                _this.dialogFormVisible=false;
                                //提示更新成功
                                _this.$message({
                                  //  message: '恭喜你，这是一条成功消息',
                                    message: response.data.message,
                                    type: 'success'
                                });
                                //重新加载数据
                                _this.loadData();
                            }else {
                                _this.$message.error(response.data.message);
                            }
                        })
                        .catch(function (error) {
                            _this.$message.error('错了哦，这是一条错误消息');
                        });
                },
                //处理删除（ 汽车删除）
                handleDelete(index, row) {
                    console.log(index, row);
                   var _this=this;
                    //确认弹框
                    this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //执行删除
                        this.$http.delete('/api/cars/brand/deleteById?id='+row.id)
                            .then(function (response) {
                                //判断删除是否成功
                                 if(response.data.code==2000){
                                     //提示
                                     _this.$message({
                                         type: 'success',
                                         message: '删除成功!'
                                     });
                                     //重新加载数据
                                     _this.loadData();
                                 }else {
                                     _this.$message.error(response.data.message);
                                 }
                            })
                            .catch(function (error) {
                                //失败处理
                                console.log(error);
                                _this.$message.error('删除失败!');
                            });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });


                }
            }
    }
</script>
<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: rgb(89, 62, 209);
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
